<template>
  <div class="rightBottom">
      <div class="zhankai" :class="{active:isShousuo}" @click="showRouter"></div>
      <div class="routers" v-if="isRouters">
            <div :style='"background:url(" + item.imgUrl + ") no-repeat;background-size:cover;"' 
                v-for="(item,index) of routers" :key="index"
                @click="toThisRoute(item.route)"
            > 
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isShousuo:false,
            isRouters:false,
            routers:[
                {imgUrl:"/images/zhishupingjia.png",route:'/goodPlace'},
                {imgUrl:"/images/kaihuasanshinian.png",route:'/thirty'},
                {imgUrl:"/images/jichushuju.png",route:''},
                {imgUrl:"/images/shouye.png",route:'/'},
            ]
        }
    },
    methods:{
        showRouter(){
            this.isRouters = !this.isRouters
            this.isShousuo = !this.isShousuo
        },
        toThisRoute(route){
            if(route){
                this.$router.push(route)
            }   
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl'
.rightBottom
    position:fixed
    right:vw(10)
    bottom:vh(22)
    width:vw(92)
    height:vh(92)
    z-index:100
    .zhankai
        background: url('/images/zhankai.png') no-repeat
        background-size:cover
        width:vw(92)
        height:vh(92)
        cursor: pointer
    .zhankai.active
        background: url('/images/shousuo.png') no-repeat
        background-size:cover
    .routers
        position:absolute
        bottom:vh(114)
        width:vw(92)
        height:vh(450)
        display:flex
        flex-direction :column
        justify-content:space-around
        z-index:100
        div 
            width:vw(92)
            height:vh(92)
            cursor: pointer
</style>